﻿/*在做报表的时候，需要将grid的列数做成活的，列数有数据库里的字段确定，这据需要将grid的列数做成动态的，经过多次实验已成，如下：
后台返回的json: 
{'action':true,'message':'error!','data':[

{'number':'1','text1': '3','info1': '4','special1': '5'}

],'columModle':[

{'header': '序号','dataIndex': 'number','width':40},

{'header': '编码','dataIndex': 'text1'},

{'header': '名称','dataIndex': 'info1'},

{'header': '金额','dataIndex': 'special1'}

],'fieldsNames':[{name: 'number'},

{name: 'text1'}, {name: 'info1'},

{name: 'special1'}]}

var cm = new Ext.grid.ColumnModel(json.columModle);

var ds = new Ext.data.JsonStore({

data:json.data,

fields:json.fieldsNames

 });

                              

var grid = new Ext.grid.GridPanel({

region: 'center',

split: true,

border:false,

cm:cm,

ds:ds

});
grid.render(document.body);

       

new Ext.Viewport({
layout: 'border',
split: true,
items: [grid]
 });*/
 
/*对于Ext动态grid这个问题，好多人都问过我，还有就是如何做多行表头，就是表头有两行以上，其中一列跨下边几列，对于多行表头的问题在这一会半会会说不清楚，只能告诉大家需要自己写插件。咱们还是说说动态表头的问题。
简单的说就是：从后台拼出json字符串--->前台取得字符串，并转化为json----->根据json创建grid
1.从后台拼出json字符串 
"{'action':true,'message':'error!','data':[
{'number':'1','text1': '3','info1': '4','special1': '5'}
],'columModle':[
{'header': '序号','dataIndex': 'number','width':40},
{'header': '编码','dataIndex': 'text1'},
{'header': '名称','dataIndex': 'info1'},
{'header': '金额','dataIndex': 'special1'}
],'fieldsNames':[{name: 'number'},
{name: 'text1'}, {name: 'info1'},
{name: 'special1'}]}"

//2.前台取得字符串，并转化为json 
Ext.Ajax.request({
url: '自己的url',
params: 'method=自己的方法',
method: 'POST',
success: function(rs,request){
var result = rs.responseText;//拿到结果集，此时为字符串
var json = Ext.util.JSON.decode(result);//将字符串转换为json类型
},
failure: function(rs,request){
}
});*/

//3.根据json创建grid 
Ext.require([
    'Ext.tip.QuickTipManager',
    'Ext.container.Viewport',
    'Ext.layout.*',
    'Ext.form.Panel',
    'Ext.form.Label',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.tree.*',
    'Ext.selection.*',
    'Ext.tab.Panel'  
]);
Ext.onReady(function() {

    Ext.tip.QuickTipManager.init();


Ext.Ajax.request({
url: 'jsp/dycolumn-list.jsp',
params: 'method=自己的方法',
method: 'POST',
success: function(rs,request){
var result = rs.responseText;//拿到结果集，此时为字符串
var json = Ext.JSON.decode(result);//将字符串转换为json类型
var cm = json.columModle;
var ds = new Ext.data.JsonStore({
data:json.data,
fields:json.fieldsNames
});
           
var grid = new Ext.grid.GridPanel({
region: 'center',
split: true,
border:false,
columns:cm,
store:ds
});

// grid.render(document.body);
Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150
        // could use a TreePanel or AccordionLayout for navigational items
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, grid],
    renderTo: Ext.getBody()
});
},
failure: function(rs,request){
}
});

});

/*注意的地方：首先grid必须在sucsess方法里实例，否则会报错，json数据也只在sucess方法里起作用。Ext的灵魂就是json很多控件都可以用以上方法实现。 */

